<template>
    <div class="page">
        <AdminTabsP :list="tabList" v-model:active="tabActive" fixed />

        <div class="work-list" v-if="list.length">
            <div class="work-item" v-for="item in list" :key="item.id">
                <img :src="item.work.file" />

                <div class="btn-group">
                    <div class="btn-item" @click="onJumpWork(item)">查看作品</div>
                    <div class="btn-item" @click="onShowTicket(item)">查看门票</div>
                </div>
            </div>
        </div>

        <el-empty v-else />
    </div>
    <LazyDialogTicketP ref="ticketDialogRef" />
</template>
<script setup>
import { useContent } from ".";

const ticketDialogRef = ref(null);
const {
    tabList,
    tabActive,
    list,

    getList
} = useContent();

const onJumpWork = (item) => {
    const url = GetWorkLink(item.work.url, item.work.templatestype_id);
    window.open(url);
}

const onShowTicket = (item) => {
    ticketDialogRef.value.show(item.work.id);
}

getList();
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    padding: 0 16px;

    .work-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 20px 0;

        .work-item {
            position: relative;
            width: 284px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(1, 23, 86, .1);

            img {
                width: 100%;
                height: 180px;
                object-fit: cover;
            }

            .btn-group {
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
                display: flex;
                height: 40px;
                background-color: rgba($color: #fff, $alpha: 0.8);
                backdrop-filter: blur(10px);

                .btn-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    height: 100%;
                    color: #5085fb;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>